<template>
  <div>
    <el-button @click='getTableData'>刷新1</el-button>
    <el-table ref='tableRef' :data="tableData" border style="width: 100%;padding: 10px" @cell-dblclick='handleCellDblClick'
      :loading='loading'>
      <el-table-column type="index" align="center" label='序号' width="90" />
      <template v-for='(item, index) in tableStyle' :key='index'>
        <template v-if='!item.immutable && item.visible'>
          <el-table-column :prop="item.fieldName" :label="item.cn" :width="item.widthPx" >
            <template #default='scope'>
<!--              <span>{{ scope.row[item.fieldName] }}</span>-->

              <template v-if='scope.row.iid == dblPK'>
                <el-input v-model='scope.row[item.fieldName]' @dblclick.prevent.stop></el-input>
              </template>
              <span v-else>{{ scope.row[item.fieldName] }}</span>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { tableRef, initSortable } from './sortable'
import { getUserTableStyles } from '~/api/tableStyle'


const store = useStore()
const tableData = ref([])
const tableStyle = ref([])
const dblPK = ref(0)
const loading = ref(false)

const getTableData = () => {
  // tableData.value = store.state.system.tableStyles.filter(item => item.tableName === 'sys_role')
  // console.log('缓存的表格数据：', tableData.value)

  loading.value = true
  getUserTableStyles().then(res => {
    if(res.code !== 1) return
    tableData.value = res.data.filter(item => item.tableName === 'sys_role')
  }).finally(()=> loading.value = false)
}

const getTableStyle = () => {
  tableStyle.value = store.state.system.tableStyles.filter(item => item.tableName === 'table_style')
}

const refresh = () => {
  getTableData()
  getTableStyle()
}

const handleCellDblClick = (row, column, cell, event) => {
  dblPK.value = row.iid
  console.log(`双击行的主键：${dblPK.value}`)
}

onMounted(() => {
  initSortable(tableData, getTableData)
})

refresh()
</script>
<style scoped>
:deep() .sortable-ghost {
  opacity: 0.6;
  color: #fff;
  background: #304156;
}
</style>